<template>
    <div id="edit">
      <div class="edit">
        <el-form :rules="rules" :model="form">
          <el-form-item prop="tName">
            <el-input v-model="form.teName" placeholder="请输入尊师的姓名" />
          </el-form-item>
          <el-form-item prop="tStatus">
            <el-input v-model="form.teStatus" placeholder="请输入尊师职业" />
          </el-form-item>
          <!-- 上传 -->
          <el-form-item>
            <el-upload
              v-model:file-list="fileList"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <!-- 上传浏览 -->
            <el-dialog v-model="dialogVisible">
              <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
            </el-dialog>
          </el-form-item>
  
          <!-- 介绍 -->
          <el-form-item prop="teIntroduce">
            <el-input
              v-model="form.teIntroduce"
              type="textarea"
              placeholder="请输入尊师介绍"
              :rows="3"
              resize="none"
            />
          </el-form-item>
        </el-form>
  
        <div class="btn">
          <el-button type="primary" @click="editT">修改尊师</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { getCurrentInstance, reactive, ref } from "vue";
  import { Plus } from "@element-plus/icons-vue";
  import {
    ElMessage,
    FormRules,
    UploadProps,
    UploadUserFile,
  } from "element-plus";
  //后端请求了
import { getOne } from "../../../../api/index2/teacher";
  //全局变量
const internalInstance = getCurrentInstance();
let global = internalInstance.appContext.config.globalProperties;

  const editT = () => {
    ElMessage({
      message: "this is a message.",
      grouping: true,
      type: "success",
    });
    //调用父级函数
  };
  //父级调用子集,进行得到值
const data = (id) => {
  console.log(global.$httpUrl);
  getOne(id).then((res) => {
    form.value = res; //传数据虚假null错
    console.log(form.value);
    fileList.value[0].url = global.$httpUrl + form.value.teImg;
  });
};
  const form = ref({
   
  });
  const rules = reactive<FormRules>({
    tName: [
      { required: true, message: "请输入尊师的名字", trigger: "blur" },
      { max: 50, message: "不要超过50", trigger: "blur" },
    ],
    tStatus: [
      { required: true, message: "请输入尊师职业", trigger: "blur" },
      { max: 50, message: "不要超过50", trigger: "blur" },
    ],
    tIntroduce: [
      { required: true, message: "请输入尊师的介绍", trigger: "blur" },
      {
        min: 10,
        max: 150,
        message: "不得低于10字,也不要超过150字",
        trigger: "blur",
      },
    ],
  });
  //默认加载图片
  const fileList = ref<UploadUserFile[]>([
    {
    name: "施美婧",
    url: form.teImg,
  },
  ]);
  
  const dialogImageUrl = ref("");
  //显示预览上传的图片
  const dialogVisible = ref(false);
  //删除图片
  const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };
  //浏览图片
  const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
  //父组件调用必须抛出去
defineExpose({
  data,
});
  </script>
  
  <style lang="less" scoped>
  #edit{
    width: 100%;
    height: 100%;
    .edit {
      :deep(.el-input__wrapper) {
        --el-input-focus-border-color: hotpink;
        background-color: rgb(92, 27, 66);
        .el-input__inner {
          color: white;
          &::-webkit-input-placeholder {
            /* WebKit browsers*/
            color: rgba(hotpink, 0.5);
          }
        }
      }
      :deep(.el-textarea) {
        // 一下为正常
        background-color: transparent;
        .el-textarea__inner {
          overflow: hidden;
          overflow-y: scroll;
          &::-webkit-scrollbar {
            width: 4px;
            height: 100%;
          }
          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 4px;
            background: mediumvioletred;
          }
          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 4px;
            background: rgba(mediumvioletred, 0.2);
          }
          background-color: rgb(92, 27, 66);
          --el-input-focus-border-color: mediumvioletred;
          color: white;
          &::-webkit-input-placeholder {
            /* WebKit browsers*/
            color: rgba(hotpink, 0.5);
          }
        }
      }
      :deep(.el-dialog) {
        width: 30%;
        --el-dialog-bg-color: rgba(0, 255, 34, 0.1);
        border-image-source: radial-gradient(
          65% 65%,
          transparent 0px,
          transparent 100%,
          lime 100%
        );
        .el-dialog__title {
          color: lime;
        }
        .el-dialog__close {
          color: lime;
        }
      }
      :deep(.el-upload--picture-card) {
        background: none;
        border: 1px dashed hotpink;
        .el-icon {
          color: hotpink;
        }
      }
      .pImg {
        width: 100%;
      }
      .btn {
        margin-top: 5%;
        margin-left: 75%;
        :deep(.el-button--primary) {
          margin-bottom: 5%;
          --el-button-bg-color: none;
          --el-button-border-color: rgba(hotpink, 0.8);
          --el-button-hover-text-color: black;
          --el-button-hover-bg-color: rgba(hotpink, 0.8);
          --el-button-hover-border-color: rgba(hotpink, 0.8);
        }
      }
    }
  }
  </style>
  